<template>
	<n-space class="bg-white mb-2 p-4" justify="end">
		<!--  -->
		<n-button text tag="a" href="https://github.com/xaboy/form-create/tree/next" target="_blank" type="primary">
			<template  #icon>
				<svg-icon icon="material-symbols:info-outline" />
			</template>
			form-create v3 文档
		</n-button>
		<n-button @click="()=>showModalWithType(SHOW_MODAL_TYPE.SHOW_JSON)">导入生成规则</n-button>
		<n-button @click="()=>showModalWithType(SHOW_MODAL_TYPE.SHOW_OPTIONS)">设置表单规则</n-button>
		<n-button @click="()=>showModalWithType(SHOW_MODAL_TYPE.GEN_JSON)" type="info">生成规则</n-button>
		<n-button @click="()=>showModalWithType(SHOW_MODAL_TYPE.GEN_OPTIONS)" type="success">表单规则</n-button>
		<n-button @click="()=>showModalWithType(SHOW_MODAL_TYPE.GEN_PAGE)" type="warning">生成组件</n-button>
	</n-space>

	<fc-designer ref="designerRef" class="bg-white"/>

	<n-modal v-model:show="showModal" :title="modalType" display-directive="if" :bordered="false" preset="card" class="w-auto" size="huge" closable mask-closable >
		<codemirror v-model:modelValue="modalCode" placeholder="请输入代码..." :style="{ height: '500px',width:'650px' }"
					:autofocus="true" :indent-with-tab="true" :tab-size="2" :extensions="extensions" />
		<n-space justify="center" class="mt-4" v-if="modalType == SHOW_MODAL_TYPE.SHOW_JSON || modalType == SHOW_MODAL_TYPE.SHOW_OPTIONS">
			<n-button type="primary" @click="handleSubmitForm">确定</n-button>
			<n-button @click="hendleCloseModal">取消</n-button>
		</n-space>
	</n-modal>
</template>

<script  setup lang='ts' >
import FcDesigner from '@form-create/designer'
import { ref } from 'vue';
import { Codemirror } from 'vue-codemirror'
import { oneDark } from '@codemirror/theme-one-dark'
import { json } from '@codemirror/lang-json'
import { vue } from '@codemirror/lang-vue'
import { Extension } from '@codemirror/state';
import { genFormCreatePage } from './index'

enum SHOW_MODAL_TYPE {
	SHOW_JSON="导入生成规则",SHOW_OPTIONS="设置表单规则",
	GEN_JSON="生成规则",GEN_OPTIONS="表单规则",
	GEN_PAGE="生成组件"
}

const designerRef = ref<any|null>(null)
const showModal = ref<boolean>(false)
const modalType = ref<SHOW_MODAL_TYPE>(SHOW_MODAL_TYPE.SHOW_JSON)
//@ts-ignore
const extensions = ref<Extension>([json(),oneDark])
const modalCode = ref<string>("")
function showModalWithType(val:SHOW_MODAL_TYPE){
	extensions.value = [oneDark,json()]
	switch(val){
		case SHOW_MODAL_TYPE.SHOW_JSON:
			modalCode.value = "{}"
			break;
		case SHOW_MODAL_TYPE.SHOW_OPTIONS:
			modalCode.value = `
{
  "form": {}
}
			`
		break;
		case SHOW_MODAL_TYPE.GEN_JSON:
			modalCode.value = stringify(JSON.parse(designerRef.value.getJson()))
		break;
		case SHOW_MODAL_TYPE.GEN_OPTIONS:
			modalCode.value = stringify(designerRef.value.getOption())
		break;
		case SHOW_MODAL_TYPE.GEN_PAGE:
		extensions.value = [oneDark,vue()]
		modalCode.value = genFormCreatePage(JSON.stringify(designerRef.value.getOption()),designerRef.value.getJson())
		break

	}
	modalType.value = val
	showModal.value = true
}

function stringify(str:any):string{
	return JSON.stringify(str,null,2)
}
function handleSubmitForm(){
	const item = designerRef!.value
	switch(modalType.value){
		case SHOW_MODAL_TYPE.SHOW_JSON:
			item.setRule(JSON.parse(modalCode.value))
		break;
		case SHOW_MODAL_TYPE.SHOW_OPTIONS:
			item.setOption(JSON.parse(modalCode.value))
		break;
	}
	hendleCloseModal()
}
function hendleCloseModal(){
	modalCode.value = ""
	showModal.value = false
}
</script>

<style lang='scss' scoped>

</style>
